<template>
  <div>
     <a href="javascript:void(0);" @click="goDetail(item.id)" class="panle_item">
        <img v-if="item.front_cover" :src="item.front_cover" alt="">
        <img v-if="item.cover_image" :src="'http://static.missevan.com/coversmini/'+item.cover_image" alt="">
        <div class="title">{{item.soundstr}}</div>
        <div class="detail">
          <span  class="item_footer playTime">{{item.view_count | count_filter}}</span>
          <span  class="item_footer comments">{{item.comment_count? item.comment_count:item.all_comments | count_filter}}</span>
        </div>
    </a> 
  </div>
</template>

<script>
export default {
  props:['item'],
  filters:{
    count_filter(value){
      return parseInt(value) > 9999 ? (Math.floor(parseInt(value)/1000)/10) + '万' : value
    }
  },
  methods:{
    goDetail(id){
      this.$router.push({
        name:"sound",
        params:{
          soundid:id
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
 .panle_item
     display block
     width 1.06rem
     height 1.63rem
     >img
        height 1.06rem
        width 1.06rem
        overflow hidden
        border-radius .04rem
    .title
      width 100%
      height .36rem
      word-break break-all
      text-overflow ellipsis
      overflow hidden
      line-height .18rem
      margin .04rem 0
      color #616161
      font-size .13rem
    .detail
      display flex
      justify-content space-between
      align-items center
      .item_footer
        font-size .11rem
        line-height .11rem
        color #bdbdbd
        position relative
        padding-left .14rem
        &::before
          content ""
          position absolute
          left 0
          display block
          width .12rem
          height .1rem
          background-image url("https://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.c71cb7b7.png")
          background-size .56rem .55rem
      .playTime::before
        background-position -0.29rem -0.44rem
      .comments::before
        background-position -0.44rem -0.27rem
</style>